/*
 * Copyright ©
 * #  
 * @author: zw
 * @date: 2021-09-09 
 */


import { defineComponent, onMounted, reactive, ref } from 'vue'
import './css/Modal.scss'
export default defineComponent({
  name: 'Modal',
  props: {
    show: { type: Boolean, default: false },
    width: { type: Number, default: 300 },
    borderRadius: { type: Number, default: 0 },
    headertextColor: { type: String, default: "#000" },
    headerColor: { type: String, default: "#fff" },
    headerText: { type: String, default: "提示" },
    contextText: { type: String, default: '文本内容' },
    contextTextColor: { type: String, default: "#000" },
    position: { type: String, default: "top" },
    btnGroupShow: { type: Boolean, default: false },
    confirmText: { type: String, default: "确定" },
    cancelText: { type: String, default: "取消  " },
  },
  setup(props, { emit, slots }) {
    const px = 'px';
    const uiModel = ref(null);
    const state = reactive({
      uiModalHeight: 0,
      modalShow: props.show,
    })
    onMounted(() => {
      state.uiModalHeight = uiModel.value.offsetHeight;
    });
    return () => {
      const { width, borderRadius, headertextColor, headerColor, headerText, contextText, contextTextColor, position, btnGroupShow, confirmText, cancelText } = props;
      const { uiModalHeight, modalShow } = state;

      function confirm() {
        state.modalShow = false;
        emit('confirm', 'confirm')
      }
      function cancel() {
        state.modalShow = false;
        emit('cancel', 'cancel')
      }
      return (
        <div
          class='modal-mast'
          style={{
            display: modalShow ? "block" : "none",
          }}
        >
          <div
            class="ui-modal"
            ref={uiModel}
            style={{
              width: width + px,
              borderRadius: borderRadius + px,
              marginLeft: - width / 2 + px,
              top: position === 'center' ? '50%' : '50px',
              marginTop: position === "center" ? - uiModalHeight / 2 + px : null,
            }}
          >
            <header class="header"
              style={{backgroundColor: headerColor}}
            ><h1>{headerText}</h1> <a href="javascript:;" style={{color: headertextColor}} onClick={cancel}>&times;</a></header>

            <article class="content">
              <p
              style={{color: contextTextColor}}>{contextText}</p>
            </article>
            {
              btnGroupShow ?
                <div class="btn-group">
                  <button class="btn btn-confirm"
                  style={{backgroundColor: headerColor}} onClick={confirm}>{confirmText}</button>
                  <button class="btn btn-cancel" onClick={cancel}>{cancelText}</button>
                </div>
                :
                null
            }
          </div>
        </div>
      )
    }
  }
})
